<template>
  <d-drag>
    <div class="data-tree">
      <el-menu :default-active="activeName" collapse @select="changemenu">
        <el-menu-item :index="0">
          <div class="menu-icon">
            <svg
              t="1621995119436"
              class="svg-icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1290"
              width="18"
              height="18"
            >
              <path
                d="M109.714286 73.142857c-21.942857 0-36.571429 14.628571-36.571429 36.571429v804.571428c0 21.942857 14.628571 36.571429 36.571429 36.571429h804.571428c21.942857 0 36.571429-14.628571 36.571429-36.571429v-804.571428c0-21.942857-14.628571-36.571429-36.571429-36.571429h-804.571428z m0-73.142857h804.571428c58.514286 0 109.714286 51.2 109.714286 109.714286v804.571428c0 58.514286-51.2 109.714286-109.714286 109.714286h-804.571428C51.2 1024 0 972.8 0 914.285714v-804.571428C0 51.2 51.2 0 109.714286 0z m438.857143 292.571429h219.428571c21.942857 0 36.571429 14.628571 36.571429 36.571428s-14.628571 36.571429-36.571429 36.571429h-219.428571c-21.942857 0-36.571429-14.628571-36.571429-36.571429s14.628571-36.571429 36.571429-36.571428z m-219.428572 438.857142c21.942857 0 36.571429-14.628571 36.571429-36.571428S351.085714 658.285714 329.142857 658.285714s-36.571429 14.628571-36.571428 36.571429 14.628571 36.571429 36.571428 36.571428z m0 73.142858C270.628571 804.571429 219.428571 753.371429 219.428571 694.857143S270.628571 585.142857 329.142857 585.142857 438.857143 636.342857 438.857143 694.857143 387.657143 804.571429 329.142857 804.571429z m-7.314286-446.171429L241.371429 277.942857c-14.628571-14.628571-36.571429-14.628571-51.2 0-14.628571 14.628571-14.628571 36.571429 0 51.2L292.571429 431.542857c7.314286 7.314286 21.942857 14.628571 29.257142 14.628572s21.942857 0 29.257143-7.314286l153.6-153.6c14.628571-14.628571 14.628571-36.571429 0-51.2-14.628571-14.628571-36.571429-14.628571-51.2 0L321.828571 358.4zM548.571429 658.285714h219.428571c21.942857 0 36.571429 14.628571 36.571429 36.571429s-14.628571 36.571429-36.571429 36.571428h-219.428571c-21.942857 0-36.571429-14.628571-36.571429-36.571428s14.628571-36.571429 36.571429-36.571429z"
                p-id="1291"
              ></path>
            </svg>
          </div>
          <span slot="title">任务</span>
        </el-menu-item>
        <el-menu-item :index="1">
          <div class="menu-icon">
            <svg
              t="1621995181340"
              class="svg-icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1021"
              width="18"
              height="18"
            >
              <path
                d="M461.197144 115.585365a406.415222 406.415222 0 0 0-103.610344 25.537761A455.301793 455.301793 0 0 0 60.619124 567.968557 427.575081 427.575081 0 0 0 73.02318 659.174845a437.790186 437.790186 0 0 0 29.915662 91.935939 72.965031 72.965031 0 0 1 60.560976-32.104613 63.479577 63.479577 0 0 1 23.34881 4.377902 357.528652 357.528652 0 0 1-29.915663-91.935939A383.796063 383.796063 0 0 1 145.98821 567.968557a369.932707 369.932707 0 0 1 224.732296-338.557744 343.665296 343.665296 0 0 1 86.098736-24.80811 68.587129 68.587129 0 0 1-13.133705-41.590068 72.965031 72.965031 0 0 1 17.511607-47.42727z m213.787541 25.537761a408.604173 408.604173 0 0 0-102.880694-25.537761 72.965031 72.965031 0 0 1 17.511608 47.42727 72.965031 72.965031 0 0 1-13.133706 41.590068 338.557744 338.557744 0 0 1 85.369086 24.80811 369.932707 369.932707 0 0 1 223.272995 338.557744 323.235087 323.235087 0 0 1-6.566853 65.668527 322.505437 322.505437 0 0 1-27.726712 87.558038h10.215105a72.965031 72.965031 0 0 1 67.127828 43.779018 405.685572 405.685572 0 0 0 32.834264-96.313841 412.252425 412.252425 0 0 0 11.674405-99.962092A454.572143 454.572143 0 0 0 674.984685 141.123126z m116.014399 672.007935a388.173965 388.173965 0 0 1-68.587129 60.560975 369.203057 369.203057 0 0 1-420.278578-5.837202 348.772848 348.772848 0 0 1-69.31678-65.668528 72.965031 72.965031 0 0 1-61.290626 63.479577 399.84837 399.84837 0 0 0 72.965031 65.668528 453.112842 453.112842 0 0 0 544.319131 0 372.121658 372.121658 0 0 0 72.965031-68.587129 72.965031 72.965031 0 0 1-70.77608-49.616221z"
                p-id="1022"
              ></path>
              <path
                d="M160.581217 632.907434h-6.566853A165.63062 165.63062 0 0 0 73.02318 659.174845a160.523068 160.523068 0 0 0 87.558037 291.860124 155.415516 155.415516 0 0 0 80.991184-22.61916 162.712019 162.712019 0 0 0 79.531884-134.985307 160.523068 160.523068 0 0 0-160.523068-160.523068z m0 233.488099a72.965031 72.965031 0 0 1-72.965031-72.965031 72.965031 72.965031 0 0 1 12.404055-40.860417 72.965031 72.965031 0 0 1 60.560976-32.104614 63.479577 63.479577 0 0 1 23.34881 4.377902 72.965031 72.965031 0 0 1 49.616221 68.587129 35.752865 35.752865 0 0 1 0 8.755804 72.965031 72.965031 0 0 1-61.290626 63.479577zM674.984685 141.123126a159.793418 159.793418 0 0 0-317.397885 0v21.889509a157.604467 157.604467 0 0 0 14.593006 66.398178 159.793418 159.793418 0 0 0 291.860124 0 145.930062 145.930062 0 0 0 15.322657-66.398178 111.636497 111.636497 0 0 0-4.377902-21.889509zM516.650568 235.977666a72.965031 72.965031 0 0 1-59.831326-31.374963 68.587129 68.587129 0 0 1-13.133705-41.590068 72.965031 72.965031 0 0 1 72.965031-72.965031 72.965031 72.965031 0 0 1 55.453423 25.537761 72.965031 72.965031 0 0 1 17.511608 47.42727 72.965031 72.965031 0 0 1-13.133706 41.590068 72.965031 72.965031 0 0 1-59.831325 31.374963zM961.007606 667.930649A159.793418 159.793418 0 0 0 875.63852 633.637084h-14.593006a160.523068 160.523068 0 0 0-72.965031 302.075229 155.415516 155.415516 0 0 0 72.965031 18.970908 160.523068 160.523068 0 0 0 99.962092-286.022922z m-99.962092 198.464884a72.965031 72.965031 0 0 1-72.965031-53.264472 58.372025 58.372025 0 0 1 0-19.700559 72.965031 72.965031 0 0 1 62.749926-72.965031h10.215105a72.965031 72.965031 0 0 1 67.127828 43.779019 77.342933 77.342933 0 0 1 5.837203 29.186012 72.965031 72.965031 0 0 1-72.965031 72.965031z"
                p-id="1023"
              ></path>
            </svg>
          </div>
          <span slot="title">工作流</span>
        </el-menu-item>
      </el-menu>
      <div class="tree-wrapper">
        <div class="tree-title">
          <span>{{ currentTitle }}</span>
        </div>
        <span class="tree-filter"
          ><el-input v-model="filterText" size="mini" placeholder="输入关键字查询"> </el-input
        ></span>
        <el-tree
          ref="tree"
          :data="computedData"
          :props="defaultProps"
          :allow-drag="allowDrag"
          :allow-drop="allowDrop"
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          node-key="id"
          default-expand-all
          draggable
          @node-click="handleNodeClick"
          @node-drop="nodeDrop"
          @node-contextmenu="contextmenu"
        >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="tool-position" v-if="showMenu && data.id == curId" @click.stop>
            <template v-if="data.node_type === 0">
                <i class="el-icon-folder-add" @click="menuClick('addFolder', node)"> 新建目录</i>
                <i class="el-icon-document-add" @click="menuClick('addFile', node)"> {{menuType === 0? '新建任务' : '新建工作流'}}</i>
            </template>
              <i v-else-if="data.category === 0" class="el-icon-document-copy" @click="menuClick('clone', node)"> 克隆</i>
              <i class="el-icon-delete" @click="menuClick('remove', node)"> 删除</i>
              <i class="el-icon-edit" @click="menuClick('rename', node)"> 重命名</i>
          </span>
          <i v-if="data.node_type === 0" :class="'el-icon-folder-opened'"></i>
           <i v-else-if="data.node_type != 0 && data.operator === 'SPARK'" class="custom-icon-i" >
              <img class="custom-icon-img" :src="require('../../../components/flow/rect/images/SPARK.jpg')"/>
           </i>
           <i v-else-if="data.node_type != 0 && data.operator === 'FLINK'" class="custom-icon-i" >
             <img class="custom-icon-img" :src="require('../../../../view/components/flow/rect/images/FLINK.jpg')"/>
           </i>
          <i v-else-if="data.node_type != 0 && data.operator === 'SHELL'" class="custom-icon-i" >
             <img class="custom-icon-img"  :src="require('../../../../view/components/flow/rect/images/SHELL.jpg')"/>
           </i>
           <i v-else-if="data.node_type != 0 && data.operator === 'DAGRUN'" class="custom-icon-i" >
             <img class="custom-icon-img"  :src="require('../../../../view/components/flow/rect/images/DAGRUN.jpg')"/>
           </i>
          <i v-else-if="data.node_type != 0 && data.category == 1" class="custom-icon-i" >
             <img class="custom-icon-img"  :src="require('../../../components/flow/rect/images/WORKFLOW.png')"/>
           </i>
          <i v-else :class="'el-icon-document'"></i>
          <span v-if="showrename && data.id == curId" class="rename-input">
            <el-tooltip v-model="showTooltip" manual content="请输入名称" placement="right">
              <input
                ref="rename"
                v-model="currentname"
                :style="{ width: renameWidth }"
                autofocus
                @keyup.enter="renameComplete"
                @blur="renameCancel"
                @focus="renameFocus"
                @input="showTooltip = false"
              />
            </el-tooltip>
          </span>
          <span v-else :class="`tree-label tree-label_${node.id}`">{{ node.label }}</span>
          <span class="tree-tools"  v-if="showrename && data.id == curId" @click.stop>
            <i class="el-icon-success" @click="renameComplete"></i>
            <i class="el-icon-error" @click="renameCancel"></i>
          </span>
        </span>
        </el-tree>
      </div>

      <el-dialog :visible.sync="dialogFormVisible" :title="title">
        <component
          ref="com"
          :is="dialogFormCom"
          :folder-id="currentFolderId"
          :folder-name="currentFolderName"
        ></component>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </d-drag>
</template>
<script>
import TaskCreate from "../task/task-create";
import WorkflowCreate from "../workflow/workflow-create";

import { mapMutations, mapState } from "vuex";
import { setTimeout } from 'timers';

// 菜单文件类型： 1： 文件夹；2：文件
const TYPES = {
  FOLDER: 0,
  FILE: 1
};
// 菜单所属功能类型： 1： task；2：workflow
const MENUTYPES = {
  TASK: 0,
  WORKPLOW: 1
};


export default {
  name: "DataTree",
  created() {
    this.menuType = this.$store.state.data.currentNav || MENUTYPES.TASK
  },
  components: {
    TaskCreate,
    WorkflowCreate
  },
  props: {
    project_id: String
  },
  data() {
    return {
      filterText: "",
      screenX: 240,
      dialogFormVisible: false,
      showTooltip: false,
      currentname: "",
      showrename: false,
      type: -1, // 标识是文件还是文件夹，对应后端的 node_type 字段
      menuType: MENUTYPES.TASK, // 标识是任务还是工作流
      visible: false,
      renameStyle: null,
      renameWidth: "80px",
      currentFolderId: "",
      currentFolderName: "",
      currentNode: null,
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      curId: -1,
      showMenu: false
    };
  },
  computed: {
    ...mapState({
      activeName: ({ data }) => {
        return data.currentNav || 0
      }
    }),
    computedData() {
      let { data, menuType } = this;
      if (data.length === 0) {
        return [];
      }
      return menuType === MENUTYPES.TASK ? [data[0]] : [data[1]];
    },
    currentTitle() {
      return this.menuType === MENUTYPES.TASK ? "任务编辑" : "工作流编辑";
    },
    dialogFormCom() {
      return this.menuType === MENUTYPES.TASK ? "task-create" : "workflow-create";
    },
    title() {
      return this.menuType === MENUTYPES.TASK ? "任务" : "工作流";
    },
    // 仅用于观察state
    stateInfo() {
      return this.$store.state
    }
  },
  watch: {
    project_id: {
      handler(val) {
        this.getFolders(val);
      },
      immediate: true
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    activeName(val) {
      this.menuType = val;
      this.filterText = "";
    }
  },
  methods: {
    ...mapMutations(["setCurrentTab", "setCurrentNav"]),
    //
    filterNode(value, data) {
      if (!value) return true;
      if (this.level != null && data.level > this.level) return true;
      else this.level = null;

      let result = data.name.indexOf(value) !== -1;
      if (result && data.node_type === 0) {
        this.level = data.level;
      }
      return result;
    },
    // 自定义 tree node ，添加图标
    renderContent(h, { node, data, store }) {
      let classes = data.node_type === TYPES.FOLDER ? "el-icon-folder" : "el-icon-document";
      return (
        <span class="custom-tree-node">
          <i class={classes}></i>
          <span style="margin-left: 4px;">{node.label}</span>
        </span>
      );
    },
    // 判断节点是否可以拖拽
    allowDrag(node) {
      let { data } = node;
      return !(data.level === 0 || data.node_type === TYPES.FOLDER);
    },
    // 拖拽时判定目标节点能否被放置
    allowDrop(draggingNode, dropNode, type) {
      /* type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
       ** 1. type in ['prev', 'next'], 目标是根目录（level == 0）不可以
       ** 2. type = 'inner' 目标不是文件夹不可以
       */
      let { data } = dropNode;
      // level 为根目录的不可以拖入； 目标不是文件夹的不可以拖入
      if (["prev", "next"].includes(type) && data.level == 0) return false;
      if ((type = "inner" && data.node_type != TYPES.FOLDER)) return false;
      return true;
    },
    /* 拖拽完成事件
     ** node: 拖拽节点； dropNode: 结束拖拽时最后进入的节点; type: 被拖拽节点的放置位置
     */
    nodeDrop(node, dropNode, type, event) {
      let id = node.data.id;
      let folder_id = dropNode.data.id;

      let promise =
        this.menuType === MENUTYPES.TASK
          ? this.$http.task.updateTask({
              id,
              folder_id
            })
          : this.$http.workflow.updateWorkflow({
              id,
              folder_id
            });
      promise
        .then(res => {
          this.getFolders(this.project_id);
        })
        .catch(err => {
          this.getFolders(this.project_id);
        });
    },
    getFolders(val) {
      this.$http.folder.getFolders({ project_id: val }).then(res => {
        this.data = res;
      });
    },
    changemenu(item) {
      this.setCurrentNav(item)
      // menu change
      this.menuType = item;
      this.filterText = "";
    },
    handleNodeClick(data, node) {
      this.visible = false;
      this.showMenu = false
      if (data.node_type === TYPES.FOLDER) return;

      let detailResult =
        this.menuType === MENUTYPES.TASK
          ? Promise.all([
              this.$http.task.getTaskById({ id: data.id }),
              this.$http.task.getTaskLastInstance({ id: data.id })
            ])
          : Promise.all([
              this.$http.workflow.getWorkflowById({ id: data.id }),
              Promise.resolve({})
            ]);

      detailResult.then(res => {
        let result = { ...res[0], ...res[1], menuType: this.menuType };
        if(res[0].operator == 'DATAFACTORY') {
          result.operator = 'DATAFACTORY'
        }
        this.setCurrentTab(result);
      });
    },
    // 弹出菜单项点击
    menuClick(type, node) {
      this.showMenu = false;
      this[`${type}`](node)
    },
    // 删除节点
    remove(node) {
      if (!node) return;
      this.$confirm('是否删除该任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let { data } = node;
        let id = data.id;
        let result = null;
        if (data.node_type === TYPES.FOLDER) {
          result = this.$http.folder.deleteFolder({ id });
        } else {
          result =
            this.menuType === MENUTYPES.TASK
              ? this.$http.task.deleteTask({ id })
              : this.$http.workflow.deleteWorkflow({ id });
        }
        result &&
          result.then(res => {
            this.$message({
              type: "success",
              message: "删除成功"
            });
            this.$refs.tree.remove(node);
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      }); 
    },
    // 克隆节点
    clone(node) {
      let task_id = node.data.id;
      if(node){
         this.$http.task.cloneTask({ task_id })
        .then(res => {
        this.$refs.tree.insertAfter(res, node);
          this.$message({
            type: "success",
            message: "克隆成功"
          });
        });
      }
    },
    rename(node) {
      let { data } = node;
      if (data && data.name) {
        this.currentname = data.name;
        this.curId = data.id
      }
      this.currentNode = node
      // 右击的 dom 元素
      let el = document.querySelector(`.tree-label_${node.id}`);
      // // 设置弹出框的位置（重命名的输入框）
      // this.renameStyle = {
      //   left: el.offsetLeft + "px",
      //   top: `${Number(el.offsetTop) + 84}px`
      // };
      this.renameWidth = `${el.offsetWidth + 40}px`; 
      this.showrename = true;
      this.$nextTick(() => {
        this.$refs.rename.focus();
      });
    },
    addFolder(node) {
      if (!node || !node.data) return;
      this.currentNode = node
      let level = node.data.level + 1;
      let data = {
        name: "新建目录",
        category: this.menuType,
        project_id: this.project_id,
        node_type: TYPES.FOLDER,
        level,
        id: "temp_id"
      };
      // 判断节点里面是否有子节点，有的话就加在第一个子节点前面insertBefore，没有的话就直接append进去。
      if (this.currentNode.childNodes.length > 0) {
        this.$refs.tree.insertBefore(data, node.childNodes[0]);
      } else {
        this.$refs.tree.append(data, node);
      }

      this.$refs.tree.setCurrentKey("temp_id");
      this.$nextTick(() => {
        // this.reference = document.querySelector(".el-tree-node.is-current .el-tree-node__content");
        let newNode = this.$refs.tree.getNode("temp_id");
        this.currentNode = newNode;
        this.rename(newNode);
      });
    },
    addFile(node) {
      if (!node || !node.data) return;
      this.currentNode = node
      this.currentFolderId = node.data.id;
      this.currentFolderName = node.data.name;
      this.dialogFormVisible = true;
    },
    addConfirm() {
      // 获取组件实例
      let $com = this.$refs.com;
      // 调用 validator 方法进行表单验证，成功后执行 save 操作
      $com.validator().then(res => {
        if (res) {
          $com.save().then(res => {
            this.$message({
              type: "success",
              message: "保存成功"
            });
            // 判断节点里面是否有子节点，有的话就加在第一个子节点前面insertBefore，没有的话就直接append进去。
            if (this.currentNode.childNodes.length > 0) {
              this.$refs.tree.insertBefore(res, this.currentNode.childNodes[0]);
            } else {
              this.$refs.tree.append(res, this.currentNode);
            }
            this.dialogFormVisible = false;
            $com.clearForm();
          });
        }
      });
    },
    renameComplete() {
      if (this.currentname) {
          let name = this.currentname;
          let { data } = this.currentNode;
          let id = data.id;
          let result = null;
          if (data.node_type === TYPES.FOLDER) {
            let parent_id = this.currentNode.parent.data.id;
            let folder = Object.assign({}, data, {
              name,
              parent_id
            });

            if (data.id === "temp_id") {
              // id === temp_id 是新增情况；
              let param = (result = this.$http.folder
                .addFolder({
                  name: folder.name,
                  category: folder.category,
                  project_id: folder.project_id,
                  level: folder.level,
                  parent_id: folder.parent_id
                })
                .then(res => {
                  data.id = res.id;
                  return res;
                })
                .catch(err => {
                  // 如果是新增报错，将新增节点移除
                  this.$refs.tree.remove(data);
                }));
            } else {
              // 文件夹更新名称
              result = this.$http.folder.updateFolder({
                id,
                name: folder.name,
                project_id: folder.project_id,
                level: folder.level,
                parent_id: folder.parent_id
              })
            }
          } else {
            // 更新文件名称（更新任务或者工作流）
            result =
              this.menuType === MENUTYPES.TASK
                ? this.$http.task.updateTask({ id, name })
                : this.$http.workflow.renameWorkflow({ id, name });
          }
          result.then(res => {
            if (data) data.name = this.currentname;
          });
          this.showrename = false;
        } else {
          this.showTooltip = true;
        }
    },
    renameCancel() {
      setTimeout(() => {
        this.showrename = false;
      }, 800)
    },
    renameFocus() {
      this.showTooltip = false;
    },
    contextmenu(event, data) {
      this.curId = data.id
      this.showMenu = true
    }
  }
};
</script>
<style lang="scss">
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.data-tree {
  position: relative;
  display: flex;
  border: 1px solid #e4e7ed;
  min-width: 160px;
  max-width: 480px;
  height: 100%;
  .el-menu--collapse {
    width: 48px;
    & > li {
      padding: 0 4px !important;
      height: 48px !important;
      line-height: 48px !important;
      & > div {
        padding: 0px 12px !important;
      }
    }
  }
  .el-tree {
    overflow: auto;
    flex: 1;
  }
  .el-tree-node > .el-tree-node__children {
    overflow: initial;
  }
  .el-tree-node.is-current {
    .el-tree-node__content {
      background-color: #f5f7fa;
    }
  }
  .tree-filter {
    padding: 8px;
    display: flex;
  }
}
.custom-icon-i {
  vertical-align: middle;
}

.custom-icon-img {
  height: 13px;
  width: 13px;
}

.tree-wrapper {
  width: 0;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  .tree-title {
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #e4e7ed;
  }
  .el-icon-folder-opened{
    color: #409eff;
  }
  .el-icon-document{
    color:#67C23A;
  }
  .rename-input {
    flex: 1;
    input {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      outline: none;
      padding: 4px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 80px;
    }
  }
  .el-tree-node__content{
    .tree-label{
      cursor: pointer;
    }
    .tree-tools{
      display: inline-block;
      margin-left: 10px;
      font-size: 16px;
      cursor: pointer;
      color: #409eff;
      font-weight: bold;
      i{
        margin-right: 10px;
        &.el-icon-error{
          color: #F56C6C;
        }
      }
    }
    &:hover{
      color: #409eff;   
    }
    .custom-tree-node{
      position: relative;
    }
    .tool-position{
      z-index: 999;
      cursor: pointer;
      position: absolute;
      left: -14px;
      top: 30px;
      background: #fff;
      width: 100px;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
      padding: 10px;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      font-size: 14px;
      i{
        color: #666;
        margin: 6px 5px;
        &:hover{
          color: #409eff;   
        }
      }
      &:before{
        content: '';
        position: absolute;
        border:10px solid;
        left: 10px;
        top: -20px;
        border-color: transparent transparent  rgb(255, 255, 255) transparent;
      }
    }
  }
  
}
.context-menu {
  width: 90px;
  list-style: none;
  padding: 4px 0;
  margin: 0;
  li.context-menu-item {
    padding: 4px 8px;
    cursor: pointer;
    text-align: left;
    &:hover {
      color: #409eff;
    }
  }
}

.el-menu-item {
  .menu-icon {
    text-align: center;
    .svg-icon {
      fill: #555;
    }
  }
  &.is-active .menu-icon .svg-icon {
    fill: #409eff;
  }

}
</style>
